<template>
    <div class="item" @click="jump">
        {{ item.name }}
        <span @click.stop="remove">×</span>
    </div>
</template>

<script setup>
const props = defineProps({
    item: {
        type: Object,
        default() {
            return {};
        },
    }
})
const emit = defineEmits(['remove'])
const jump = () => {
    window.location.href = props.item.href;
}
const remove = () => {
    emit('remove')
}
</script>

<style scoped>
    .item {
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        text-align: center;
        font-size: 16px;
        border: 1px solid #eee;
        cursor: pointer;
    }
    .item span {
        margin-left: 10px;
        cursor: pointer;
    }
</style>